<template>
  <div class="boox">
    <div class="top">
      <p class="title">年度游客量展示</p>
      <p class="bg"></p>
    </div>
    <div class="middle" ref="middle"></div>
  </div>
</template>

<script lang="ts" setup name="RightMiddle">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let middle = ref()
onMounted(() => {
  let myCharts = echarts.init(middle.value)
  myCharts.setOption({
    title: {
      show: false,
    },
    xAxis: {
      data: ['1月份', '2月份', '3月份', '4月份', '5月份', '6月份'],
      axisTick: { show: false },
      axisLine: { show: true },
      axisLabel: {
        color: 'white',
        fontWeight: 'bold',
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      name: '单位/W',
      nameTextStyle: { color: 'white', align: 'center', fontWeight: 'bold' },
      show: true,
      axisLine: { show: true },
      axisLabel: { show: true, color: 'white' },
      splitLine: {
        show: false,
      },
    },
    tooltip: {
      show: true,
      type: 'axis',
    },
    axisPointer: { show: true, label: { show: true }, type: 'line' },
    series: [
      {
        type: 'scatter',
        data: [10, 20, 30, 40, 50],
        smooth: true,
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        symbolSize: (data: any) => data,
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
            {
              offset: 0,
              color: 'red',
            },
            {
              offset: 1,
              color: 'skyblue',
            },
          ]),
        },
        label: {
          show: true,
          color: 'white',
          position: 'top',
          fontWeight: 'bold',
        },
      },
      {
        type: 'scatter',
        data: [60, 80, 10, 30, 70],
        smooth: true,
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        symbolSize: (data: any) => data,
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.3, 0.6, 0.8, [
            {
              offset: 0,
              color: 'red',
            },
            {
              offset: 1,
              color: 'blue',
            },
          ]),
        },
        label: {
          show: true,
          color: 'white',
          position: 'top',
          fontWeight: 'bold',
        },
      },
      {
        type: 'scatter',
        data: [10, 30, 30, 40, 10],
        smooth: true,
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        symbolSize: (data: any) => data,
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.3, 0.6, 0.8, [
            {
              offset: 0,
              color: 'pink',
            },
            {
              offset: 1,
              color: 'green',
            },
          ]),
        },
        label: {
          show: true,
          color: 'white',
          position: 'top',
        },
      },
    ],
    grid: {
      left: '7%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
  })
})
</script>
<style scoped lang="scss">
.boox {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  padding: 5px 0;
  flex: 18;
  .top {
    flex: 3;
    p {
      height: 50%;
      font-size: 20px;
    }
    .bg {
      background: url('../../images/dataScreen-title.png') no-repeat left center;
    }
  }
  .middle {
    flex: 15;
    height: 100%;
  }
}
</style>
